import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
import {Button, Tabs, message, List, Timeline} from 'antd';

export default class IndexAssociationNews extends Component {

    callback(key) {
        message.info(`你点击了 ${key}`);
    }

    render() {
        const TabPane = Tabs.TabPane;
        const data = [
            {
                title: '2018-12-25',
                desc: "协会动态001"
            }, {
                title: '2018-12-26',
                desc: "协会动态002"
            }
        ];
        const data1 = [
            {
                title: '2018-12-25',
                desc: "技术服务001"
            }, {
                title: '2018-12-26',
                desc: "技术服务001"
            }
        ];

        return (
            <div className="welding-association">
                <div className="text-center">
                    <h2 className="mrt40">协会新闻</h2>
                    <div className="welding-set-gutter-line">
                        <hr/>
                        <span/>
                        <hr/>
                    </div>
                    <h3>ASSOCIATION NEWS</h3>
                </div>
                <div className="clearfix association-news" style={{padding: "0 2%"}}>
                    <div className="col-md-7">
                        <div className="row">
                            <h4 className="after-line"><span><b>会议通知</b></span></h4>

                            <Timeline>
                                <Timeline.Item className="active-news">
                                    <span><b>25</b><small>12月<br/>2018</small></span>
                                    <span/>
                                    <span><NavLink exact to={{
                                        pathname: '/meeting/detail',
                                        state: {id: "技术服务001"}
                                    }}>焊接互联大事记新闻新闻新闻新闻新闻</NavLink></span>
                                    <span><b>上海</b></span>
                                    <span><Button size="small" type="primary"><NavLink exact to={{
                                        pathname: '/meeting/detail',
                                        state: {id: "技术服务001"}
                                    }}>即将开始</NavLink></Button></span>
                                </Timeline.Item>
                                <Timeline.Item className="active-news">
                                    <span><b>25</b><small>12月<br/>2018</small></span>
                                    <span/>
                                    <span><NavLink exact to={{
                                        pathname: '/meeting/detail',
                                        state: {id: "技术服务001"}
                                    }}>焊接互联大事记新闻新闻新闻新闻新闻</NavLink></span>
                                    <span><b>上海</b></span>
                                    <span><Button size="small" type="primary"><NavLink exact to={{
                                        pathname: '/meeting/detail',
                                        state: {id: "技术服务001"}
                                    }}>即将开始</NavLink></Button></span>
                                </Timeline.Item>
                                <Timeline.Item className="disabled-news">
                                    <span><b>25</b><small>12月<br/>2018</small></span>
                                    <span/>
                                    <span><NavLink exact to={{
                                        pathname: '/meeting/detail',
                                        state: {id: "技术服务001"}
                                    }}>焊接互联大事记新闻新闻新闻新闻新闻</NavLink></span>
                                    <span><b>上海</b></span>
                                    <span><Button size="small" type="primary" disabled>已经结束</Button></span>
                                </Timeline.Item>
                                <Timeline.Item className="disabled-news">
                                    <span><b>25</b><small>12月<br/>2018</small></span>
                                    <span/>
                                    <span><NavLink exact to={{
                                        pathname: '/meeting/detail',
                                        state: {id: "技术服务001"}
                                    }}>焊接互联大事记新闻新闻新闻新闻新闻</NavLink></span>
                                    <span><b>上海</b></span>
                                    <span><Button size="small" type="primary" disabled>已经结束</Button></span>
                                </Timeline.Item>
                            </Timeline>
                        </div>
                    </div>
                    <div className="col-md-5">
                        <Tabs defaultActiveKey="1" onChange={this.callback} animated={false}>
                            <TabPane tab="协会动态" key="1">
                                <List
                                    size="small"
                                    bordered
                                    itemLayout="horizontal"
                                    dataSource={data}
                                    renderItem={item => (
                                        <List.Item>
                                            <List.Item.Meta
                                                title={<a href="https://ant.design">
                                                    <small>{item.title}</small>
                                                </a>}
                                                description={<NavLink exact to={{
                                                    pathname: '/association/detail',
                                                    state: {id: "上海市发展和改革委员会关于价格的通知"}
                                                }}>{item.desc}</NavLink>}
                                            />
                                        </List.Item>
                                    )}
                                />
                            </TabPane>
                            <TabPane tab="技术服务" key="2">
                                <List
                                    size="small"
                                    bordered
                                    itemLayout="horizontal"
                                    dataSource={data1}
                                    renderItem={item => (
                                        <List.Item>
                                            <List.Item.Meta
                                                title={<a href="https://ant.design">
                                                    <small>{item.title}</small>
                                                </a>}
                                                description={<NavLink exact to={{
                                                    pathname: '/technical/detail',
                                                    state: {id: "技术服务001"}
                                                }}>{item.desc}</NavLink>}
                                            />
                                        </List.Item>
                                    )}
                                />
                            </TabPane>
                        </Tabs>
                    </div>
                </div>
            </div>
        );
    }
}

